<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>景点展示</title>
		<link href="static/css/styles1.css" rel="stylesheet">
		<style>
			.myA img{
				width: 300px;
				height: 200px;
			}
		</style>
	</head>
	<body>
		<div class="container">
			<div class="head">
				<div class="left">
					<img src="static/img/微信图片_20241216150745.png"/>
				</div>
				<div class="right">
					<ul>
						<li class="cityname" data-cityname="娄底" id="ld"><a href="javascript:void(0)">娄底</a></li>
						<li class="cityname" data-cityname="邵阳" id="sy"><a href="javascript:void(0)">邵阳</a></li>
						<li class="cityname" data-cityname="衡阳" id="hy"><a href="javascript:void(0)">衡阳</a></li>
						<li class="cityname" data-cityname="湘潭" id="xt"><a href="javascript:void(0)">湘潭</a></li>
					</ul>
				</div>
			</div>
			<hr/>
			<div class="content">
				<div class="left">
					<img src="static/img/1734332911507.jpg" />
				</div>
				<div class="right">
					<div class="tploudi area">
						<ul class="clearfix">
						</ul>
					</div>
				</div>
			</div>
		</div>
<%--					<!-- 邵阳 -->--%>
<%--					<div class="tpshaoyang area">--%>
<%--						<ul class="clearfix">--%>
<%--							<li>--%>
<%--								<div class="item">--%>
<%--									<a href="static/langshan.html"><img src="static/img/爱在崀山.jpg" alt="Image 1" title="爱在崀山"></a>--%>
<%--									<p>&emsp;爱在崀山&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;<span>¥0</span>起</p>--%>
<%--									<p style="color:darkgray;">&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;0%满意度</p>--%>
<%--								</div>--%>
<%--							</li>--%>
<%--							<li>--%>
<%--								<div class="item">--%>
<%--									<a href="static/yifujiangg.html"><img src="static/img/夫夷江漂流.jpg" alt="Image 2" title="夫夷江漂流"></a>--%>
<%--									<p>&emsp;夫夷江漂流&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;<span>¥20</span>起</p>--%>
<%--									<p style="color:darkgray;">&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;0%满意度</p>--%>
<%--					--%>
<%--								</div>--%>
<%--							</li>--%>
<%--							<li>--%>
<%--								<div class="item">--%>
<%--									<a href="static/langshanscenicspot.html"><img src="static/img/崀山国家级风景区.jpg" alt="Image 3" title="崀山国家级风景区"></a>--%>
<%--									<p>&emsp;崀山国家级风景区&emsp;&emsp;&emsp;&emsp;<span>¥0</span>起</p>--%>
<%--									<p style="color:darkgray;">&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;91%满意度</p>--%>
<%--								</div>--%>
<%--							</li>--%>
<%--						--%>
<%--							<li>--%>
<%--								<div class="item">--%>
<%--									<a href="static/longyao.html"><img src="static/img/龙瑶幽谷.jpg" alt="Image 4" title="龙瑶幽谷"></a>--%>
<%--									<p>&emsp;龙瑶幽谷&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;<span>¥0</span>起</p>--%>
<%--									<p style="color:darkgray;">&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;0%满意度</p>--%>
<%--								</div>--%>
<%--							</li>--%>
<%--							<li>--%>
<%--								<div class="item">--%>
<%--									<a href="static/quyougu.html"><img src="static/img/曲幽谷.jpg" alt="Image 5" title="曲幽谷" width="283px"--%>
<%--                                                                       height="163px"></a>--%>
<%--									<p>&emsp;曲幽谷&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;<span>¥0</span>起</p>--%>
<%--									<p style="color:darkgray;">&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;0%满意度</p>--%>
<%--								</div>--%>
<%--							</li>--%>
<%--							<li>--%>
<%--								<div class="item">--%>
<%--									<a href="static/weiyuan.html"><img src="static/img/魏源温泉度假村.jpg" alt="Image 6" title="魏源温泉度假村"></a>--%>
<%--									<p>&emsp;魏源温泉度假村&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;<span>¥0</span>起</p>--%>
<%--									<p style="color:darkgray;">&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;0%满意度</p>--%>
<%--								</div>--%>
<%--							</li>--%>
<%--						</ul>--%>
<%--					</div>--%>
<%--					--%>
<%--					<!-- 湘潭 -->--%>
<%--					<div class="tpxiangtan area">--%>
<%--						<ul class="clearfix">--%>
<%--							<li>--%>
<%--								<div class="item">--%>
<%--									<a href="static/panglong.html"><img src="static/img/盘龙大观园.png" alt="Image 1" title="盘龙大观园"></a>--%>
<%--									<p id="name">&emsp;盘龙大观园&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;<span>¥68起</span></p>--%>
<%--									<p style="color:darkgray;">&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;88%满意度</p>--%>
<%--								</div>--%>
<%--							</li>--%>
<%--							<li>--%>
<%--								<div class="item">--%>
<%--									<a href="static/qbs.html"><img src="static/img/齐白石纪念馆.png" alt="Image 2" title="齐白石纪念馆"></a>--%>
<%--									<p>&emsp;齐白石纪念馆&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;<span>¥0</span>起</p>--%>
<%--									<p style="color:darkgray;">&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;33%满意度</p>--%>
<%--								</div>--%>
<%--							</li>--%>
<%--							<li>--%>
<%--								<div class="item">--%>
<%--									<a href="static/shaoshan.html"><img src="static/img/韶山旅游区.png" alt="Image 3" title="韶山旅游区"></a>--%>
<%--									<p>&emsp;韶山旅游区&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;<span>¥0</span>起</p>--%>
<%--									<p style="color:darkgray;">&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;85%满意度</p>--%>
<%--								</div>--%>
<%--							</li>--%>
<%--						--%>
<%--							<li>--%>
<%--								<div class="item">--%>
<%--									<a href="static/haizuguan.html"><img src="static/img/湘潭海族馆.png" alt="Image 4" title="湘潭海族馆"></a>--%>
<%--									<p>&emsp;湘潭海族馆&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;<span>¥0</span>起</p>--%>
<%--									<p style="color:darkgray;">&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;50%满意度</p>--%>
<%--								</div>--%>
<%--							</li>--%>
<%--							<li>--%>
<%--								<div class="item">--%>
<%--									<a href="static/hongwuxing.html"><img src="static/img/最忆红五星剧场.png" alt="Image 5" title="最忆红五星剧场" width="283px"--%>
<%--                                                                          height="163px"></a>--%>
<%--									<p>&emsp;最忆红五星剧场&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;<span>¥0</span>起</p>--%>
<%--									<p style="color:darkgray;">&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;0%满意度</p>--%>
<%--								</div>--%>
<%--							</li>--%>
<%--							<li>--%>
<%--								<div class="item">--%>
<%--									<a href="static/Panda.html"><img src="static/img/岳阳中华大熊猫苑.jpg" alt="Image 6" title="岳阳中华大熊猫苑" width="283px"--%>
<%--                                                                     height="163px"></a>--%>
<%--									<p>&emsp;岳阳中华大熊猫苑&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;<span>¥50</span>起</p>--%>
<%--									<p style="color:darkgray;">&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;53%满意度</p>--%>
<%--								</div>--%>
<%--							</li>--%>
<%--						</ul>--%>
<%--					</div>--%>
<%--					--%>
<%--					--%>
<%--					<!-- 衡阳 -->--%>
<%--					<div class="tphengyang area">--%>
<%--						<ul class="clearfix">--%>
<%--							<li>--%>
<%--								<div class="item">--%>
<%--									<a href="static/hegyangdapu.html"><img src="static/img/衡阳大浦跳伞基地.png" alt="Image 1"--%>
<%--                                                                           title="衡阳大浦跳伞基地"></a>--%>
<%--									<p>&emsp;衡阳大浦跳伞基地&emsp;&emsp;&emsp;&emsp;<span>¥0</span>起</p>--%>
<%--									<p style="color:darkgray;">&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;0%满意度</p>--%>
<%--								</div>--%>
<%--							</li>--%>
<%--							<li>--%>
<%--								<div class="item">--%>
<%--									<a href="static/huaguoshan.html"><img src="static/img/衡阳花果山.png" alt="Image 2" title="衡阳花果山" id="phy"></a>--%>
<%--									<p>&emsp;衡阳花果山&emsp;&emsp;&emsp;&emsp;&emsp;<span>¥0</span>起</p>--%>
<%--									<p style="color:darkgray;">&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;100%满意度</p>--%>
<%--								</div>--%>
<%--							</li>--%>
<%--							<li>--%>
<%--								<div class="item">--%>
<%--									<a href="static/meihuatown.html"><img src="static/img/梅花小镇山野度假区.png" alt="Image 3" title="梅花小镇山野度假区" id="mh"></a>--%>
<%--									<p>&emsp;梅花小镇山野度假区&emsp;&emsp;&emsp;&emsp;<span>¥0</span>起</p>--%>
<%--									<p style="color:darkgray;">&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;0%满意度</p>--%>
<%--								</div>--%>
<%--							</li>--%>
<%--							<li>--%>
<%--								<div class="item">--%>
<%--									<a href="static/nanyuedamiao.html"><img src="static/img/南岳大庙.png" alt="Image 4" title="南岳大庙"></a>--%>
<%--									<p>&emsp;南岳大庙&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;<span>¥0</span>起</p>--%>
<%--									<p style="color:darkgray;">&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;89%满意度</p>--%>
<%--								</div>--%>
<%--							</li>--%>
<%--							<li>--%>
<%--								<div class="item">--%>
<%--									<a href="static/nanyuefjq.html"><img src="static/img/南岳风景区.png" alt="Image 5" title="南岳风景区"></a>--%>
<%--									<p>&emsp;南岳风景区&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;<span>¥0</span>起</p>--%>
<%--									<p style="color:darkgray;">&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;87%满意度</p>--%>
<%--								</div>--%>
<%--							</li>--%>
<%--							<li>--%>
<%--								<div class="item">--%>
<%--									<a href="static/qinghuawan.html"><img src="static/img/清花湾亲果乐园.jpg" alt="Image 6" title="清花湾亲果乐园" id="qgly"></a>--%>
<%--									<p>&emsp;清花湾亲果乐园&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;<span>¥0</span>起</p>--%>
<%--									<p style="color:darkgray;">&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;0%满意度</p>--%>
<%--								</div>--%>
<%--							</li>--%>
<%--						</ul>--%>
<%--					</div>--%>


		<script type="text/javascript" src="https://code.jquery.com/jquery-3.7.1.js"></script>
		<script>


			$(function(){
				cityShow('娄底');

				// 添加点击事件监听
				$(".cityname a").click(function(event) {
					event.preventDefault(); // 阻止默认行为

					//获取data-cityname属性的值
					var cityName = $(this).parent().data('cityname');
					console.log(cityName,"~~~~~~~~~~~~~~~~~~~~~")
					cityShow(cityName)
				});
			});


		 function cityShow(cityName){
			 $.ajax({
				 url: '/querycity',
				 type: 'POST',
				 dataType: 'json',
				 data: {
					 city: cityName
				 },
				 success: function(response) {
					 // 清空当前内容区域
					 $('.clearfix').empty();

					 // 根据返回的数据动态创建HTML元素并插入
					 response.forEach(ld=>{
						 let li = "<li> " +
								 " <div class='item'>" +
								 " <a href='/static/js/"+ld.html+"' class='myA'><img  src='/img/"+ld.img+"' alt='Image 1' title='"+ld.scenic_name+"'></a>" +
								 " <p style='color:darkgray;'>&emsp;<b style='color: black'>"+ld.scenic_name+"</b>&emsp;&emsp;&emsp;<b>"+ld.satisfaction+"</b>%满意度</p>" +
								 " <p>&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;<span>¥"+ld.price+"</span>起</p>" +
								 " </div>" +
								 " </li>";
						 $('.clearfix').append(li);
					 })
				 },
				 error: function(xhr, status, error) {
					 console.error('Error fetching data:', error);
				 }
			 });
		 }

		</script>
	</body>
</html>